<template>
    <el-tree ref="treeRef" :data="menuList" :props="defaultProps" show-checkbox node-key="id" :default-checked-keys="ids"
        :default-expanded-keys="expandIds" />
    <div>
        <el-button type="primary" @click="submitFn">保存</el-button>
        <el-button>清空</el-button>
    </div>
</template>
<script setup lang='ts'>
import { getAllMenuApi, getMenusByRoleIdApi, allocRomeMenuApi } from '@/api'
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { ElTree } from 'element-plus'
const route = useRoute()

// 在element-plus里面，没有为 ElTree 生成对应的类型，所以现在采用的是 InstanceType 这个泛型操作（类型体操）， 用来返回某个实例的类型
const treeRef = ref<InstanceType<typeof ElTree>>()

// 可以判断一下，有没有id，如果没有id，跳转回原来的页面
// if()

// 一开始进入到页面，需要做两件事
// 1. 展示所有的菜单数据
// 2. 把当前这个用户的旧的菜单数据渲染出来
const defaultProps = {
    children: 'children',
    label: 'title',
}
const menuList = ref<IMenuModelWidthChildren[]>([])
getAllMenuApi().then(res => {
    if (res.code === 200) {
        menuList.value = res.data;
    }
})
const expandIds = computed(() => {
    return menuList.value.map(item => item.id);
})
const roleMenu = ref<IMenuModel[]>([])
// 获取默认勾选的id方法1
// const ids = []
getMenusByRoleIdApi(route.query.id as any as number).then(res => {
    if (res.code === 200) {
        roleMenu.value = res.data;
        // ids = res.data.map(item=>item.id)
    }
})
// 获取默认勾选的id方法2
const ids = computed(() => {
    return roleMenu.value.map(item => item.id);
})


const submitFn = () => {
    let checked = treeRef.value!.getCheckedNodes()
    // console.log(checked)
    let menuIds = checked.map(item => item.id)
    // console.log(ids.value)
    allocRomeMenuApi({
        roleId: route.query.id as any as number,
        menuIds
    }).then(res => {
        // 判断是否成功，如果成功
        // 1. 提示
        // 2. 跳转
    })
}
</script>
<style lang="less" scoped></style>